/* =========================================================
   CYBER POINT DEVELOPMENT
   GEORGIAN ABOUT PAGE
========================================================= */


/* =========================================================
   GLOBAL RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    font-family:
        Arial,
        "Noto Sans Georgian",
        sans-serif;
}


/* =========================================================
   HTML
========================================================= */

html {

    scrollbar-width: none;

    -ms-overflow-style: none;

    overflow-x: hidden;
}


html::-webkit-scrollbar {

    display: none;
}


/* =========================================================
   BODY
========================================================= */

body {

    background:
        #0f0a00;

    color:
        white;

    overflow-x:
        hidden;

    opacity:
        0;

    animation:
        pageFadeIn 0.8s ease forwards;
}


/* =========================================================
   MOVING GRID
========================================================= */

body::before {

    content:
        "";

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        200%;

    height:
        100%;

    background-image:

        linear-gradient(
            rgba(255, 166, 0, 0.137) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 166, 0, 0.137) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    animation:
        moveGrid 10s linear infinite;

    pointer-events:
        none;

    z-index:
        -1;
}


@keyframes moveGrid {

    from {

        transform:
            translate(0, 0);
    }

    to {

        transform:
            translate(-50px, -50px);
    }
}


/* =========================================================
   PAGE TRANSITIONS
========================================================= */

@keyframes pageFadeIn {

    from {

        opacity:
            0;
    }

    to {

        opacity:
            1;
    }
}


@keyframes pageFadeOut {

    from {

        opacity:
            1;
    }

    to {

        opacity:
            0;
    }
}


body.fade-out {

    animation:
        pageFadeOut 0.5s ease forwards;
}


/* =========================================================
   ABOUT SECTION
========================================================= */

.about {

    width:
        90%;

    max-width:
        1100px;

    margin:
        auto;

    padding:
        20px 0 80px;

    position:
        relative;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.section-title {

    position:
        relative;

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        space-between;

    text-align:
        center;

    gap:
        1rem 1.5rem;

    padding-top:
        20px;

    margin-bottom:
        60px;
}


/* =========================================================
   LOGO
========================================================= */

.section-title .logo {

    order:
        1;
}


/* =========================================================
   HOME BUTTON
========================================================= */

.section-title .home-btn1 {

    order:
        2;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.section-title p {

    order:
        5;

    flex:
        1 1 100%;

    color:
        #ffffff;

    letter-spacing:
        4px;

    font-size:
        2rem;

    margin:
        0;
    
    margin-top:
        20px;

    text-transform:
        uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.section-title h1 {

    order:
        4;

    flex:
        1 1 100%;

    font-size:
        clamp(1.8rem, 5vw, 58px);

    margin-top:
        10px;

    line-height:
        1.25;
}


.section-title h1 span {

    color:
        #ff8d0c;

    display:
        inline-block;
}


/* =========================================================
   ABOUT CARD
========================================================= */

.about-card {

    background:
        rgb(31, 20, 0);

    border:
        1px solid
        rgba(255, 141, 12, .25);

    border-radius:
        20px;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    padding:
        clamp(24px, 5vw, 50px);

    box-shadow:
        0 0 40px
        rgba(255, 141, 12, .08);
}


/* =========================================================
   INTRO
========================================================= */

.intro {

    font-size:
        clamp(1rem, 2.2vw, 22px);

    line-height:
        1.9;

    color:
        #d9d9d9;
}


.intro span {

    color:
        #ff8d0c;

    font-weight:
        bold;
}


/* =========================================================
   DIVIDER
========================================================= */

.divider {

    width:
        100%;

    height:
        1px;

    margin:
        45px 0;

    background:
        linear-gradient(
            to right,
            transparent,
            #ff8d0c,
            transparent
        );
}


/* =========================================================
   HEADINGS
========================================================= */

.about-card h2 {

    color:
        #ff8d0c;

    margin-bottom:
        20px;

    font-size:
        clamp(1.3rem, 3vw, 30px);

    line-height:
        1.4;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.about-card p {

    color:
        #bdbdbd;

    line-height:
        1.9;

    margin-bottom:
        35px;
}


/* =========================================================
   LIST
========================================================= */

.about-card ul {

    list-style:
        none;

    margin-bottom:
        55px;
}


.about-card ul li {

    padding:
        12px 0;

    color:
        #d4d4d4;

    font-size:
        clamp(0.95rem, 1.6vw, 18px);

    line-height:
        1.6;
}


/* =========================================================
   BUTTON GROUP
========================================================= */

.button-group {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        20px;

    flex-wrap:
        wrap;
}


/* =========================================================
   SHARED BUTTONS
========================================================= */

.home-btn1,
.home-btn2,
.contact-btn {

    display:
        inline-block;

    text-decoration:
        none;

    padding:
        18px 38px;

    border-radius:
        50px;

    font-weight:
        bold;

    transition:
        .35s;
}


/* =========================================================
   RETURN HOME BUTTON
========================================================= */

.home-btn1 {

    color:
        #fff;

    border:
        2px solid
        #ff8d0c;

    background:
        transparent;

    padding:
        10px 20px;

    border-radius:
        50px;

    text-decoration:
        none;

    font-weight:
        bold;

    letter-spacing:
        0.08rem;

    font-size:
        clamp(0.75rem, 1.5vw, 1rem);

    white-space:
        nowrap;
}


.home-btn1:hover {

    background:
        #6600c548;

    transform:
        translateY(-4px);

    box-shadow:
        0 0 25px
        rgba(255, 141, 12, .45);
}


/* =========================================================
   LANGUAGE BUTTON
========================================================= */

.home-btn2 {

    color:
        #fff;

    border:
        2px solid
        #ff8d0c;

    background:
        transparent;

    cursor:
        pointer;
}


.home-btn2:hover {

    background:
        #6600c548;

    transform:
        translateY(-4px);

    box-shadow:
        0 0 25px
        rgba(255, 141, 12, .45);
}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.contact-btn {

    color:
        #000;

    background:
        #ff8d0c;
}


.contact-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:

        0 0 25px
        #ff8d0c,

        0 0 60px
        rgba(255, 141, 12, .45);
}


/* =========================================================
   LOGO
========================================================= */

.logo {

    position:
        relative;

    --logo-size:
        clamp(90px, 12vw, 220px);

    width:
        var(--logo-size);

    height:
        var(--logo-size);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.logo img {

    max-width:
        100%;

    max-height:
        100%;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    display:
        block;

    transition:
        transform 0.3s ease;
}


/* =========================================================
   LOGO RING
========================================================= */

.logo::before {

    content:
        "";

    position:
        absolute;

    inset:
        -8px;

    border:
        2px solid
        rgba(255, 141, 12, .5);

    border-top-color:
        #ff8d0c;

    border-radius:
        50%;

    animation:
        spin 12s linear infinite;

    pointer-events:
        none;
}


@keyframes spin {

    from {

        transform:
            rotate(0deg);
    }

    to {

        transform:
            rotate(360deg);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .about-card {

        padding:
            35px;
    }


    .section-title {

        margin-bottom:
            45px;
    }


    .section-title h1 {

        font-size:
            clamp(1.8rem, 7vw, 3rem);
    }


    .about-card p {

        line-height:
            1.8;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {

    .about {

        width:
            92%;

        padding:
            15px 0 50px;
    }


    .section-title {

        padding-top:
            15px;

        margin-bottom:
            35px;
    }


    .section-title h1 {

        font-size:
            1.75rem;

        line-height:
            1.3;
    }


    .section-title p {

        font-size:
            12px;

        letter-spacing:
            3px;
    }


    .home-btn1 {

        padding:
            8px 14px;

        font-size:
            0.75rem;
    }


    .about-card {

        padding:
            22px;
    }


    .about-card h2 {

        font-size:
            1.35rem;
    }


    .about-card p {

        font-size:
            0.95rem;

        line-height:
            1.8;
    }


    .intro {

        font-size:
            1rem;

        line-height:
            1.8;
    }


    .about-card ul li {

        font-size:
            0.95rem;

        line-height:
            1.5;
    }


    .button-group {

        flex-direction:
            column;

        width:
            100%;
    }


    .home-btn2,
    .contact-btn {

        width:
            100%;

        text-align:
            center;

        padding:
            15px 20px;
    }


    .logo {

        --logo-size:
            90px;
    }

}